<template>
  <div class="vitae">
    <el-row :gutter="10">
      <el-col :span="6" :xs="24">
        <div class="vitae_left">
          <el-card class="box-card">
            <div class="left">
              <div class="vitae_left_img">
                <el-image
                  class="el-image-inner"
                  :src="require('@/assets/' + info.portrait)"
                  fit="fill"
                ></el-image>
              </div>
              <div class="vitae_left_desc">
                <div class="desc__name">
                  <span>{{ info.name }}</span>
                </div>
                <div class="desc__other">
                  <span>{{ info.post }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ info.city }}</span>
                  <el-divider direction="vertical"></el-divider>
                  <span>{{ info.age }}</span>
                </div>
              </div>
              <div class="vitae_left_info">
                <div class="info_header weight">
                  <i class="el-icon-user-solid"></i>
                  <span>基本信息</span>
                  <el-divider></el-divider>
                </div>
                <div class="info_main">
                  <el-row
                    type="flex"
                    class="row-bg"
                    justify="space-between"
                    v-for="(item, index) in info.infos"
                    :key="index"
                  >
                    <el-col :span="12">
                      <div>{{ item.label }}</div>
                    </el-col>
                    <el-col :span="12">
                      <div>{{ item.value }}</div>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <div class="vitea_left_skill">
                <div class="skill_header weight">
                  <i class="el-icon-medal"></i>
                  <span>职业技能</span>
                  <el-divider></el-divider>
                </div>
                <div class="info_main">
                  <el-row
                    type="flex"
                    class="row-bg"
                    justify="space-between"
                    v-for="(item, index) in info.skills"
                    :key="index"
                  >
                    <el-col :span="12">
                      <div>{{ item.label }}</div>
                    </el-col>
                    <el-col :span="12">
                      <el-progress :percentage="item.value"></el-progress>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="18" :xs="24">
        <div class="vitae_right">
          <el-card class="box-card">
            <div class="vitae_right_education" v-if="education.disabled">
              <div class="education_header weight">
                <e-icon icon-name="fa fa-mortar-board" />
                <span>教育背景</span>
                <el-divider></el-divider>
              </div>
              <div class="education_main">
                <el-row
                  v-for="(item, index) in education.educations"
                  :key="index"
                >
                  <el-col :span="20" :xs="16">
                    <span class="education_name weight">{{ item.name }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span class="education_major">{{ item.major }}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span class="">{{ item.diploma }}</span>
                  </el-col>
                  <el-col :span="4" :xs="8">
                    <div>
                      <span class="education_date">{{ item.date }}</span>
                    </div>
                  </el-col>
                  <el-col :span="24">
                    <div>
                      <p class="education_describe">{{ item.describe }}</p>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div class="vitae_right_major" v-if="major.disabled">
              <div class="major_header weight">
                <i class="el-icon-reading"></i>
                <span>专业技能</span>
                <el-divider></el-divider>
              </div>
              <div class="diploma_main">
                <ul v-for="(item, index) in major.majors" :key="index">
                  <li>{{ item }}</li>
                </ul>
              </div>
            </div>
            <div class="vitae_right_work" v-if="work.disabled">
              <div class="work_header weight">
                <i class="el-icon-suitcase-1"></i>
                <span>工作经历</span>
                <el-divider></el-divider>
              </div>
              <div class="work_main">
                <div class="block">
                  <el-timeline>
                    <el-timeline-item
                      v-for="(item, index) in work.works"
                      :key="index"
                      :timestamp="item.date"
                      placement="top"
                      :type="item.type"
                    >
                      <el-card>
                        <el-row class="weight">
                          <el-col :span="4" :xs="24">
                            <span>{{ item.company }}</span>
                          </el-col>
                          <el-col :span="16" :xs="24">
                            <span>{{ item.name }}</span>
                          </el-col>
                          <el-col :span="4" :xs="24">
                            <div>后端工程师</div>
                          </el-col>
                        </el-row>
                        <p class="indent_character">{{ item.describe }}</p>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                </div>
              </div>
            </div>
            <div class="vitae_right_evaluation" v-if="evaluation.disabled">
              <div class="evaluation_header weight">
                <i class="el-icon-edit"></i>
                <span>自我评价</span>
                <el-divider></el-divider>
              </div>
              <div class="evaluation_main indent_character">
                {{evaluation.describe}}
              </div>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import config from "@/config";
export default {
  data() {
    return {
      info: config.info,
      education: config.education,
      major: config.major,
      work: config.work,
      evaluation: config.evaluation,
    };
  },
  props: {},
  watch: {},
  computed: {},
  filters: {},
  components: {},
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style scoped>
.vitae_left_img {
  text-align: center;
}
.vitae_left_desc {
  margin-top: 3px;
  text-align: center;
}
.desc__name {
  font-weight: bolder;
  font-size: 18px;
}
.desc__other {
  font-size: 14px;
}
.el-image-inner {
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.el-divider--horizontal {
  margin: 10px 0;
}
.vitae_left_info {
  margin: 10px 0;
}
.info_main {
  font-size: 14px;
  margin: 5px;
}
.weight {
  font-weight: bolder;
}
.row-bg {
  margin-top: 5px;
}
i {
  margin-right: 5px;
}
.education_major .education_date {
  font-size: 14px;
}
.education_describe {
  font-size: 14px;
  text-indent: 2em;
  /* margin-left: 2rem; */
}
.indent_character {
  font-size: 14px;
  text-indent: 2em;
}
</style>
